<template>
  <div
    :id="'t_' + id"
    class="title-wrapper"
    :class="{
      f: !column,
    }"
  >
    <div v-if="block" class="title-block" :style="getBlockStyle" />
    <div v-if="title" :style="getStyle">{{ title }}</div>
    <div v-if="subTitle" :style="getSubStyle">{{ subTitle }}</div>
  </div>
</template>
<script setup lang="ts">
import { transUnit } from "@/utils/common";
const props = defineProps({
  // 唯一标识
  id: {
    type: [String, Number],
    default: "",
  },
  // 标题
  title: {
    type: String,
    default: "",
  },
  // 颜色
  color: {
    type: String,
    default: "#fff",
  },
  // 大小
  size: {
    type: [Number, String],
    default: 24,
  },
  // 对齐方式
  align: {
    type: String,
    default: "left",
  },
  // 加粗
  bold: {
    type: [String, Number],
    default: 400,
  },
  // 行数
  line: {
    type: [Number, String],
    default: 0,
  },
  // 副标题
  subTitle: {
    type: String,
    default: "",
  },
  // 副标题颜色
  subColor: {
    type: String,
    default: "#fff",
  },
  // 副标题大小
  subSize: {
    type: [Number, String],
    default: 16,
  },
  // 副标题加粗
  subBold: {
    type: [String, Number],
    default: 400,
  },
  // 副标题行数
  subLine: {
    type: [Number, String],
    default: 0,
  },
  // 标题副标题间隔
  gap: {
    type: [Number, String],
    default: 0,
  },
  // 行高
  lineHeight: {
    type: Number,
    default: 32,
  },
  // 左边距
  left: {
    type: [Number, String],
    default: 10,
  },
  // 方块颜色
  block: {
    type: String,
    default: "",
  },
  // 方块宽度
  blockWidth: {
    type: [Number, String],
    default: 4,
  },
  // 方块位置
  blockPos: {
    type: String,
    default: "top", // top center bottom full
  },
  // 纵向布局
  column: {
    type: Boolean,
    default: true,
  },
  // 是否使用rem单位
  rem: {
    type: Boolean,
    default: false,
  },
});

const boxHeight = ref(0); // 盒子高度

onMounted(() => {
  let el = document.getElementById("t_" + props.id);
  if (el) {
    boxHeight.value = el.clientHeight;
  }
});

// 计算方块样式
const getBlockStyle = computed(() => {
  let style = <any>{
    width: transUnit(props.blockWidth, props.rem),
    height: transUnit(props.lineHeight, props.rem),
    background: props.block,
  };
  if (props.blockPos === "full") {
    style["height"] = "auto";
    style["top"] = 0;
    style["bottom"] = 0;
  }
  if (props.blockPos === "center") {
    style["top"] = boxHeight.value / 2 - props.lineHeight / 2 + "px";
    style["bottom"] = null;
  }
  if (props.blockPos === "top") {
    style["top"] = 0;
    style["bottom"] = null;
  }
  if (props.blockPos === "bottom") {
    style["top"] = null;
    style["bottom"] = 0;
  }
  return style;
});

// 计算标题样式
const getStyle = computed(() => {
  let style = <any>{
    color: props.color,
    width: "auto",
    textAlign: props.align,
    fontSize: transUnit(props.size, props.rem),
    fontWeight: props.bold,
    lineHeight: transUnit(props.lineHeight, props.rem),
    paddingLeft: transUnit(props.left, props.rem),
  };
  if (props.color.indexOf("linear") != -1 || props.color.indexOf("radial") != -1) {
    style["width"] = "fit-content";
    style["color"] = "transparent";
    style["background"] = props.color;
    style["-webkit-background-clip"] = "text";
    style["-webkit-text-fill-color"] = "transparent";
  }
  if (props.line && props.line != 0) {
    style["-webkit-line-clamp"] = props.line;
    style["overflow"] = "hidden";
    style["display"] = "-webkit-box";
    style["text-overflow"] = "ellipsis";
    style["-webkit-box-orient"] = "vertical";
  }
  return style;
});

// 计算副标题样式
const getSubStyle = computed(() => {
  let style = <any>{
    color: props.subColor,
    width: "auto",
    textAlign: props.align,
    fontSize: transUnit(props.subSize, props.rem),
    fontWeight: props.subBold,
    lineHeight: transUnit(props.lineHeight, props.rem),
    paddingLeft: transUnit(props.left, props.rem),
  };
  if (props.subColor.indexOf("linear") != -1 || props.subColor.indexOf("radial") != -1) {
    style["color"] = "transparent";
    style["width"] = "fit-content";
    style["background"] = props.subColor;
    style["-webkit-background-clip"] = "text";
    style["-webkit-text-fill-color"] = "transparent";
  }
  if (props.subLine && props.subLine != 0) {
    style["-webkit-line-clamp"] = props.subLine;
    style["overflow"] = "hidden";
    style["display"] = "-webkit-box";
    style["text-overflow"] = "ellipsis";
    style["-webkit-box-orient"] = "vertical";
  }
  if (props.gap && props.gap != 0) {
    style[props.column ? "margin-top" : "margin-left"] = transUnit(props.gap, props.rem);
  }
  return style;
});
</script>
<style lang="scss" scoped>
.title-wrapper {
  position: relative;
  .title-block {
    position: absolute;
    left: 0;
  }
}
</style>
